<template>
	<div v-if="!dialogShow" class="menuTree-wrapper">
		<div class="tree-wrapper">
			<el-tree
				:indent="0"
				lazy
				ref="tree"
				node-key="id"
				:props="treeProps"
				:load="loadNode"
				:expand-on-click-node="false"
				icon-class="icon iconfont iconkuangjia-xiala1"
				@node-contextmenu="openMenu"
				@node-click="handleNodeClick"
				@node-expand="nodeExpand"
			>
				<span slot-scope="{ node, data }">
					<span :class="[data.icon + `${data.state ? ' ' : ' disabled'}`]"></span>
					<span @dblclick="clkDb(node, data)">{{ node.label }}</span>
				</span>
			</el-tree>
		</div>
		<div
			:class="[`${menuPositionTop ? 'dropMenu menuTop' : 'dropMenu'}` + ' ' + `${menuShow ? 'active' : ''}`]"
			v-if="Boolean(dropMenuShow)"
			v-show="menuShow"
			:style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
		>
			<div v-for="item in dropMenuList" :key="item.index" @click="menuOperation(item.index)">
				<span :class="item.icon"></span>
				{{ item.label }}
			</div>
		</div>
	</div>
	<div v-else class="menuTree-wrapper businessMask">
		<div class="businessDialog middle">
			<div class="dialog-header" v-winmove>
				<span>模块选择</span>
			</div>
			<div class="dialog-body">
				<div class="tree-wrapper">
					<el-tree
						:indent="0"
						lazy
						ref="tree"
						node-key="id"
						:props="treeProps"
						:load="loadNode"
						:expand-on-click-node="false"
						icon-class="icon iconfont iconkuangjia-xiala1"
						@node-contextmenu="openMenu"
						@node-click="handleNodeClick"
						@node-expand="nodeExpand"
					>
					</el-tree>
				</div>
			</div>
			<div class="dialog-footer right">
				<span class="systemButtonConfirm" @click="confirm">确定</span>
				<span class="systemButtonCancel" @click="cancel">取消</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { menuTree } from '@/system/api/menuManage'
	import { dataTree } from '../../business/api/dataManage'
	import winmove from '@/directives/winmove'

	export default {
		data() {
			return {
				treeURL: null,
				treeProps: {
					label: 'name',
					isLeaf: 'leaf',
					id: 'id',
				},
				rootNode: {},
				rootResolve: null,
				menuShow: false,
				menuPositionTop: false,
				menuTop: 0,
				menuLeft: 0,
				menuItems: [
					{
						name: '删除',
						iconPosition: 'before',
						iconname: 'delicon',
					},
				],
				checkedData: null,
			}
		},
		directives: {
			winmove,
		},
		// 树类型 type 0-菜单
		// 权限类型 roleType 0-全加载 1-根据分级管理员权限加载 2-根据角色业务权限加载
		// 是否显示菜单 dropMenuShow 0-无 1-有
		// 接口参数 param
		props: {
			type: 0,
			roleType: 0,
			dropMenuShow: 0,
			dropMenuList: null,
			dialogShow: false,
			param: {
				parentId: 0,
			},
		},
		created() {
			switch (Number(this.type)) {
				case 0:
					this.treeURL = menuTree
					break
				case 1:
					this.treeURL = dataTree
					break
				default:
					return
			}
			this.globalClick()
		},
		methods: {
			// 树 懒加载
			async loadNode(node, resolve) {
				if (node.level === 0) {
					this.rootResolve = resolve
					this.rootNode = node
					this.param.parentId = 0
					this.param.pId = 0
				} else {
					this.param.parentId = node.data.id
					this.param.pId = node.data.id
				}
				this.treeURL(this.param).then(res => {
					if (res.code == 200) {
						if (res.success) {
							res.info.forEach(item => {
								item.icon = item.type ? 'icon iconfont icongongnengcaidan-ziliaoguanli' : 'icon iconfont icongongnengcaidan-gongchengfuwuguanli'
							})
							return resolve(res.info)
						} else this.message(res.msg, 3)
					} else this.message(res.msg, 3)
				})
			},
			// 节点 左击
			async handleNodeClick(e) {
				let data = e
				data.clickType = 1
				this.checkedData = e
				this.$emit('getNodeInfo', data)
				this.menuShow = false
			},
			// 节点 右击
			async openMenu(e, data, node) {
				await this.$emit('getNodeInfo', node)
				let menuClientY = e.clientY
				let windowHeight = document.documentElement.clientHeight
				if (windowHeight - menuClientY > 200) {
					this.menuTop = e.clientY + 30
					this.menuPositionTop = false
				} else {
					let height = document.getElementsByClassName('dropMenu')[0].offsetHeight
					this.menuPositionTop = true
					this.menuTop = e.clientY - height - 30
				}
				this.menuLeft = e.clientX
				this.menuShow = true
			},
			// 节点 刷新
			refreshNode(node) {
				let data = node.operationType ? node : node.parent
				if (node.level === 0 || node.rootNode) data = this.rootNode
				data.loaded = false
				data.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
				setTimeout(() => {
					if (node.highLightId) {
						this.highLightNode(node.highLightId)
					}
				}, 100)
			},
			// 树 双击
			clkDb(node, data) {
				this.$emit('addRole', node.data)
			},
			// 树 菜单
			menuOperation(e) {
				this.$emit('menuOperations', e)
			},
			// 节点 高亮
			highLightNode(id) {
				this.$refs.tree.setCurrentKey(id)
			},
			// 节点 展开
			nodeExpand() {
				this.menuShow = false
			},
			// 监测页面点击事件，隐藏单位树菜单
			globalClick() {
				let _this = this
				document.addEventListener('click', function(e) {
					_this.menuShow = false
					let flag = e.target.contains(document.getElementsByClassName('el-menu')[0])
					if (!flag) return
				})
			},
			confirm() {
				if (!this.checkedData) {
					this.message('请选择数据', 3)
					return
				}
				if (!this.checkedData.leaf) {
					this.message('请选择根节点', 3)
					return
				}
				this.$emit('confirm', this.checkedData)
			},
			cancel() {
				this.$emit('cancel')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.menuTree-wrapper {
		.tree-wrapper {
			width: 100%;
			height: 100%;

			.el-tree {
				color: var(--organization-tree-text-color);
				padding-left: 20px;
				background-color: transparent;

				.el-tree-node,
				::v-deep.el-tree-node {
					&:hover .el-tree-node__content {
						background-color: transparent;
					}

					.el-tree-node__content {
						.iconkuangjia-xiala1 {
							color: var(--organization-tree-dropdown-color);
							font-size: 12px;
							padding-left: 0;
							padding-right: 0;

							& ~ span span {
								&:first-child {
									margin-right: 5px;
									width: 16px;
									height: 16px;
									display: inline-block;
								}

								&:last-child {
									padding: 2px 8px;
								}
							}
						}

						.is-leaf.iconkuangjia-xiala1 {
							visibility: hidden;
							font-size: 2px;
						}
					}

					.el-tree-node__children {
						padding-left: 28px;
						overflow: visible;

						.el-tree-node {
							position: relative;

							&::before {
								content: '';
								display: block;
								width: 20px;
								height: 13px;
								border-bottom: 1px solid var(--organization-tree-line-color);
								border-bottom-left-radius: 5px;
								position: absolute;
								top: 0;
								left: 0;
								transform: translateX(-100%);
							}

							&::after {
								content: '';
								display: block;
								width: 20px;
								height: 100%;
								border-left: 1px solid var(--organization-tree-line-color);
								position: absolute;
								bottom: -10px;
								left: 0;
								transform: translateX(-100%);
							}

							&:first-child::after {
								top: 0;
								height: calc(100% + 10px);
							}

							&:last-child::after {
								top: 0;
								height: 11px;
							}
						}
					}

					&.is-current {
						.el-tree-node__content {
							background-color: transparent;

							span:last-child span:last-child,
							.el-tree-node__label {
								background-color: rgba(83, 168, 255, 1);
								color: rgba(255, 255, 255, 1);
							}
						}

						.el-tree-node__children .el-tree-node .el-tree-node__content span:last-child {
							background-color: transparent;
							color: var(--organization-tree-text-color);
						}
					}

					&.is-expanded .el-tree-node__content {
						background-color: transparent;
					}
				}
			}
		}

		.dropMenu {
			visibility: hidden;

			&.active {
				visibility: visible;
				position: absolute;
				z-index: 998;
				background: rgba(255, 255, 255, 0.85);
				box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
				cursor: pointer;
				display: flex;
				flex-direction: column;

				&::before {
					display: block;
					content: '';
					width: 20px;
					height: 20px;
					position: absolute;
					top: 0;
					transform: rotate(45deg) translateY(-75%);
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
					z-index: -999;
				}

				div {
					background: rgba(255, 255, 255, 1);
					padding: 12px 20px;
					display: inline-block;
					white-space: nowrap;
					color: rgba(51, 51, 51, 1);

					.iconzengjia {
						color: rgba(132, 142, 252, 1);
					}

					.iconbiaoge-bianji {
						color: rgba(51, 153, 255, 1);
					}

					.iconbiaoge-shanchu {
						color: rgba(249, 73, 99, 1);
					}

					&:hover {
						z-index: 999;
						background: rgba(83, 168, 255, 1);
						color: rgb(255, 255, 255);

						.icon {
							color: rgb(255, 255, 255);
						}
					}

					span {
						margin-right: 13px;
					}
				}

				&.menuTop {
					&::before {
						top: 100%;
					}
				}
			}
		}
	}
</style>
